<template>
  <div class="basic-box">
    <el-form
      :model="cardForm"
      :rules="cardRules"
      :disabled="disabled"
      ref="cardForm"
      size="small"
      label-position="right"
      label-width="130px"
    >
      <div class="haruyuki-form-title" v-if="isShowTitle">{{ basicTitleData.cardTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="结算卡类型:" prop="balanceAccType">
            <el-select
              size="small"
              v-model="cardForm.balanceAccType"
              placeholder="请选择结算卡类型"
              @change="balanceAccTypeChange"
            >
              <el-option
                v-for="item in balanceAccTypeOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="cardForm.balanceAccType == '3'">
        <el-col :span="8">
          <el-form-item label="非法人身份证人像面:" prop="ecardFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpEcardFrontRequest"
              :limit="1"
              :file-list="ecardFrontList"
              :on-remove="ecardFrontRemove"
              :before-remove="beforeecardFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="非法人身份证国徽面:" prop="ecardReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpEcardReverseRequest"
              :limit="1"
              :file-list="ecardReverseList"
              :on-remove="ecardReverseRemove"
              :before-remove="beforeecardReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="cardForm.balanceAccType == '11' || cardForm.balanceAccType == '3'">
        <el-col :span="8">
          <el-form-item label="结算卡正面:" prop="accountFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAccountFrontRequest"
              :limit="1"
              :file-list="accountFrontList"
              :on-remove="accountFrontRemove"
              :before-remove="beforeaccountFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算卡反面:" prop="accountReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAccountReverseRequest"
              :limit="1"
              :file-list="accountReverseList"
              :on-remove="accountReverseRemove"
              :before-remove="beforeaccountReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="cardForm.balanceAccType == '3'">
          <el-form-item label="非法人结算授权书图片:" prop="billingAttorney">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpBillingAttorneyRequest"
              :limit="1"
              :file-list="holdBillingAttorneyList"
              :on-remove="httpBillingRemove"
              :before-remove="beforehttpBillingRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="cardForm.balanceAccType == '21'">
        <el-col :span="24">
          <el-form-item label="开户许可证:" prop="openPermit">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpOpenPermitRequest"
              :limit="1"
              :file-list="openPermitList"
              :on-remove="openPermitRemove"
              :before-remove="beforeopenPermitRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="cardForm.balanceAccType == '3'">
          <el-form-item label="非法人姓名:" prop="unincorporatedName">
            <el-input
              type="text"
              v-model="cardForm.unincorporatedName"
              placeholder="请输入非法人姓名"
              @blur="inputBlurName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="cardForm.balanceAccType == '3'">
          <el-form-item label="非法人身份证号:" prop="unincorporatedId">
            <el-input
              type="text"
              v-model="cardForm.unincorporatedId"
              placeholder="请输入非法人身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-if="cardForm.balanceAccType == '11' || cardForm.balanceAccType == '21'">
          <el-form-item label="开户账户名称:" prop="balanceAccName">
            <el-input
              type="text"
              v-model="cardForm.balanceAccName"
              placeholder="请输入开户账户名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户账号:" prop="balanceAccCardNo">
            <el-input
              type="text"
              v-model="cardForm.balanceAccCardNo"
              placeholder="请输入开户账号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行省市区:" prop="accProvinceCityArea">
            <el-cascader
              v-if="isShow"
              class="haruyuki-width-100"
              @change="provCityAreaChange"
              v-model="cardForm.accProvinceCityArea"
              :options="provinceCityAreaOptions"
              :props="provinceCityAreaProps"
              placeholder="请选择开户行省市区"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行名称:" prop="bankType">
            <el-select
              size="small"
              class="haruyuki-width-100"
              @change="bankTypeChange"
              v-model="cardForm.bankType"
              filterable
              placeholder="请输入开户行名称"
            >
              <el-option
                v-for="item in bankNameOptions"
                :key="item.bankType"
                :label="item.bankName"
                :value="item.bankType"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户支行名称:" prop="openAccBankType">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="cardForm.openAccBankType"
              filterable
              placeholder="请输入开户支行名称"
              @change="openAccBankTypeChange"
            >
              <el-option
                v-for="item in accBankNameOptions"
                :key="item.openAccBankType"
                :label="item.openAccBankName"
                :value="item.openAccBankType"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行预留手机号:" prop="bankMobile">
            <el-input
              type="tel"
              v-model="cardForm.bankMobile"
              placeholder="请输入银行预留手机号"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="银行授权书:" prop="empowerPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpempowerPicRequest"
              :limit="1"
              :file-list="empowerPicList"
              :on-remove="empowerPicRemove"
              :before-remove="beforeempowerPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import {
  getFirstBankList,
  getSecondBankList,
  getBalanceAccTypeList,
  queryRpiBalanceAccName
} from "@/api/rb-oem/posinfo/pos_info";
import { uploadPrivate, uploadMerchantOCRCard } from "@/api/system/oss";
import { getRegion } from "@/api/system/dict";
import canvasImg from '@/util/canvasImg';
import {dateFormat} from "@/util/date";

export default {
  mixins: [canvasImg],
  props: {
    cardForm: Object,
    userType: {
      type: [String, Number],
      default: "",
    },
    isShowTitle: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    merchantId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      basicTitleData: {
        cardTitle: "结算信息",
      },
      isShow: true,
      cardRules: {
        balanceAccType: [
          { required: true, message: "请输入结算卡类型", trigger: "blur" },
        ],
        accountFront: [
          { required: true, message: "请上传结算卡正面", trigger: "blur" },
        ],
        accountReverse: [
          { required: true, message: "请上传结算卡反面", trigger: "blur" },
        ],
        billingAttorney: [
          {
            required: true,
            message: "请上传非法人结算授权书图片",
            trigger: "blur",
          },
        ],
        ecardFront: [
          {
            required: true,
            message: "请上传非法人身份证人像面",
            trigger: "blur",
          },
        ],
        ecardReverse: [
          {
            required: true,
            message: "请上传非法人身份证国徽面",
            trigger: "blur",
          },
        ],
        openPermit: [
          { required: true, message: "请上传开户许可证", trigger: "blur" },
        ],
        bankType: [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
        ],
        openAccBankType: [
          { required: true, message: "请输入开户支行名称", trigger: "blur" },
        ],
        accProvinceCityArea: [
          { required: true, message: "请选择开户行省市区", trigger: "blur" },
        ],
        bankMobile: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
        ],
        balanceAccName: [
          { required: true, message: "请输入开户账户名称", trigger: "blur" },
        ],
        balanceAccCardNo: [
          { required: true, message: "请输入开户账号", trigger: "blur" },
        ],
        unincorporatedName: [
          { required: true, message: "请输入非法人姓名", trigger: "blur" },
        ],
        unincorporatedId: [
          { required: true, message: "请输入非法人身份证号", trigger: "blur" },
        ],
      },
      balanceAccTypeOptions: [],
      bankNameOptions: [],
      accBankNameOptions: [],
      provinceCityAreaOptions: [],
      provinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountFrontList: [],
      accountReverseList: [],
      openPermitList: [],
      holdBillingAttorneyList: [],
      ecardFrontList: [],
      ecardReverseList: [],
      empowerPicList: [],
    };
  },
  watch: {
    'userType'(val) {
      //通过监听商户类型 查询结算卡类型列表
      getBalanceAccTypeList(val).then((res) => {
        this.balanceAccTypeOptions = res.data.data;
        // if (userType === '3') {
        //   this.cardForm.balanceAccType = "11";
        // } else {
        //   this.cardForm.balanceAccType = "";
        // }
      });
    },
  },
  created() {
    this.getFirstBank();
  },
  methods: {
    /* 开户支行名称 */
    openAccBankTypeChange(e){
      const index = this.accBankNameOptions.findIndex(obj => obj.openAccBankType === e);
      this.cardForm.openAccBankName = this.accBankNameOptions[index].openAccBankName;
    },
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
     /* 获取开户账户名称 */
     balanceAccTypeChange(val) {
      queryRpiBalanceAccName(this.merchantId, val).then((res) => {
        this.cardForm.balanceAccName = res.data.data;
      });
    },
    getFirstBank() {
      getFirstBankList("-1", "-1").then((res) => {
        this.bankNameOptions = res.data.data.records;
      });
    },
    /* 开户行 change */
    bankTypeChange(val) {
      this.accBankNameOptions = [];

      const index = this.bankNameOptions.findIndex(obj => obj.bankType === val);
      this.cardForm.bankName = this.bankNameOptions[index].bankName;

      if (val && this.cardForm.accProvinceCityArea) {
        this.cardForm.openAccBankType = '';
        getSecondBankList(
          "-1",
          "-1",
          this.cardForm.accProvinceCityArea[1],
          val
        ).then((res) => {
            this.accBankNameOptions = res.data.data.records;
        });
      }
    },
    /* 开户行 change */
    provCityAreaChange(val) {
      this.accBankNameOptions = [];
      if (val && this.cardForm.bankType) {
        this.cardForm.openAccBankType = '';
        getSecondBankList(
          "-1",
          "-1",
          val[1],
          this.cardForm.bankType
        ).then((res) => {
            this.accBankNameOptions = res.data.data.records;
        });
      }
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 结算卡正面上传 */
    httpAccountFrontRequest(option) {
      // type1身份证人像面2身份证国徽面3银行卡4开户证明5营业执照
      uploadMerchantOCRCard(option.file, "3").then((res) => {
        this.cardForm.accountFront = res.data.data.link;
        this.cardForm.balanceAccCardNo = res.data.data.cardNum;
        this.$refs.cardForm.validateField("accountFront");
      });
    },
    /* 结算卡正面删除 */
    accountFrontRemove(file, fileList) {
      this.accountFrontList = fileList;
      this.cardForm.accountFront = "";
    },
    beforeaccountFrontRemove() {
      return this.$confirm(`确定移除结算卡正面照片？`);
    },
    /* 结算卡反面上传 */
    httpAccountReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.cardForm.accountReverse = res.data.data.name;
        this.$refs.cardForm.validateField("accountReverse");
      });
    },
    /* 结算卡反面删除 */
    accountReverseRemove(file, fileList) {
      this.accountReverseList = fileList;
      this.cardForm.accountReverse = "";
    },
    beforeaccountReverseRemove() {
      return this.$confirm(`确定移除结算卡反面照片？`);
    },
    /* 开户许可证上传 */
    httpOpenPermitRequest(option) {
      uploadMerchantOCRCard(option.file, "4").then((res) => {
        this.cardForm.openPermit = res.data.data.link;
        this.cardForm.balanceAccName = res.data.data.customerName;
        this.cardForm.balanceAccCardNo = res.data.data.bankAccount;
        this.$refs.cardForm.validateField("openPermit");
      });
    },
    /* 开户许可证删除 */
    openPermitRemove(file, fileList) {
      this.openPermitList = fileList;
      this.cardForm.openPermit = "";
    },
    beforeopenPermitRemove() {
      return this.$confirm(`确定移除开户许可证照片？`);
    },
    beforehttpHoldRemove() {
      return this.$confirm(`确定移除手持授权书图片照片？`);
    },
    /* 银行授权书 */
    httpempowerPicRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.cardForm.empowerPic = res.data.data.name;
        this.$refs.cardForm.validateField("empowerPic");
      });
    },
    /* 银行授权书删除 */
    empowerPicRemove(file, fileList) {
      this.empowerPicList = fileList;
      this.cardForm.empowerPic = "";
    },
    beforeempowerPicRemove() {
      return this.$confirm(`确定移除银行授权书照片？`);
    },
    /* 非法人结算授权书 图片上传 */
    httpBillingAttorneyRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.cardForm.billingAttorney = res.data.data.name;
        this.$refs.cardForm.validateField("billingAttorney");
      });
    },
    /* 非法人结算授权书 图片删除 */
    httpBillingRemove(file, fileList) {
      this.holdBillingAttorneyList = fileList;
      this.cardForm.billingAttorney = "";
    },
    beforehttpBillingRemove() {
      return this.$confirm(`确定移除非法人结算授权书照片？`);
    },
    /* 非法人身份证正面上传 */
    httpEcardFrontRequest(option) {
      uploadMerchantOCRCard(option.file, "1").then((res) => {
        this.cardForm.ecardFront = res.data.data.link;
        this.cardForm.unincorporatedName = res.data.data.name;
        this.cardForm.unincorporatedId = res.data.data.num;
        if (this.cardForm.balanceAccType == '3') {
          this.cardForm.balanceAccName = res.data.data.name;
          this.cardForm.authAddress = res.data.data.address;
        }
        this.$refs.cardForm.validateField("ecardFront");
      });
    },
    /* 非法人身份证正面删除 */
    ecardFrontRemove(file, fileList) {
      this.ecardFrontList = fileList;
      this.cardForm.ecardFront = "";
    },
    beforeecardFrontRemove() {
      return this.$confirm(`确定移除非法人身份证正面照片？`);
    },
    /* 非法人身份证反面上传 */
    httpEcardReverseRequest(option) {
      // uploadPrivate(option.file, option.file.name).then((res) => {
      //   this.cardForm.ecardReverse = res.data.data.name;
      //   this.$refs.cardForm.validateField("ecardReverse");
      // });

      // type1身份证人像面2身份证国徽面3银行卡4开户证明5营业执照
      uploadMerchantOCRCard(option.file, "2").then((res) => {
        if(res.data.data.endDate){
          this.cardForm.authIdCernoValid = dateFormat(new Date(res.data.data.endDate), "yyyyMMdd");
        }
        this.cardForm.ecardReverse = res.data.data.link;
        this.$refs.cardForm.validateField("ecardReverse");
      });
  },
    /* 非法人身份证反面删除 */
    ecardReverseRemove(file, fileList) {
      this.ecardReverseList = fileList;
      this.cardForm.ecardReverse = "";
    },
    beforeecardReverseRemove() {
      return this.$confirm(`确定移除 照片？`);
    },
    /* 非法人姓名赋值开户账户名称 */
    inputBlurName() {
      this.cardForm.balanceAccName = this.cardForm.unincorporatedName;
    }
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  padding: 20px 40px 20px 0;
}
.basic-margin-top {
  margin-top: 40px;
}
</style>